// PurchaseMaterialsModal.jsx
import React, { useState } from 'react';
import { Modal, Table, Card, Tag, Button } from 'antd';
import PurchaseRequestPage from './PurchaseRequisition.jsx';
import { EyeOutlined } from "@ant-design/icons";

const mockSupplier = [
    { id: 1, name: '供应商A', type: 2 },
    { id: 2, name: '供应商B', type: 3 },
    { id: 3, name: '供应商C', type: 9 },
];

const statusMean = {
    1: '审核中',
    2: '未付款',
    3: '已取消',
    4: '已完成',
    5: '已付款'
};

const statusColor = {
    '进行中': 'processing',
    '未付款': 'warning',
    '已取消': 'error',
    '已完成': 'success',
    '已付款': 'success'
};

const mockPurchaseList = [
    {
        subtotal: 141950.0,
        numbering: 'PO2023001',
        supplier: 1,
        name: '商品混凝土',
        specification: 'C30',
        quantity: 300,
        unit: '立方米',
        unitPrice: 450,
        rate: 0.05,
        other_fee: 200,
        remark: '快递费200',
        status: 1,
        purchaseTime: '2023-03-10',
        paymentTime: '2023-03-11',
    }
];

const PurchaseMaterialsModal = ({
                                    visible,
                                    onCancel,
                                    selectedOrder,
                                }) => {
    const [modalVisible, setModalVisible] = useState(false);

    // 根据 supplier id 找到对应名称
    const getSupplierName = (supplierId) => {
        const supplier = mockSupplier.find((s) => s.id === supplierId);
        return supplier ? supplier.name : '未知供应商';
    };

    // 材料表格列
    const materialColumns = [
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',
            render: (id) => getSupplierName(id),
            width: 120,
        },
        {
            title: '材料',
            dataIndex: 'name',
            key: 'name',
            width: 120,
        },
        {
            title: '数量',
            dataIndex: 'quantity',
            key: 'quantity',
            render: (_, r) => `${r.quantity} ${r.unit}`,
            width: 100,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (statusCode) => {
                const statusText = statusMean[statusCode] || '未知';
                return <Tag color={statusColor[statusText]}>{statusText}</Tag>;
            },
        },
        {
            title: '下单日期',
            dataIndex: 'purchaseTime',
            key: 'purchaseTime',
            width: 140,
        },
        {
            title: '金额',
            dataIndex: 'subtotal',
            key: 'subtotal',
            render: (amount) => `¥${amount.toLocaleString()}`,
            width: 120,
        },
        {
            title: '操作',
            key: 'action',
            width: 60,
            render: (_, record) => (
                <Button
                    type="link"
                    icon={<EyeOutlined />}
                    onClick={() => handleViewDetail(record.numbering)}
                >
                    查看材料
                </Button>
            ),
        },
    ];

    const handleViewDetail = () => {
        setModalVisible(true);
    };
    const handleCloseModal = () => {
        setModalVisible(false);
    };

    return (
        <Modal
            title={`采购材料详情 - 单号: ${selectedOrder}`}
            open={visible}
            onCancel={onCancel}
            footer={null}
            width={900}
            style={{ top: 20 }}
            destroyOnHidden={true}
        >
            <Card size="small" >
                <Table
                    dataSource={mockPurchaseList}  // ✅ 改成模拟数据
                    columns={materialColumns}
                    rowKey={(r) => r.numbering + r.name}
                    pagination={{
                        pageSize: 5,
                        showSizeChanger: false,
                        showTotal: (total, range) =>
                            `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
                    }}
                    scroll={{ x: 800 }}
                />
            </Card>
            <Modal
                open={modalVisible}
                onCancel={handleCloseModal}
                footer={null}
                width={900}
                style={{ top: 20 }}
                destroyOnHidden={true}
            >
                <PurchaseRequestPage onClose={handleCloseModal} />
            </Modal>
        </Modal>
    );
};

export default PurchaseMaterialsModal;
